<script setup lang="ts">
import { treeFindLabel } from '@fl/utils/tree';
// import { cloneDeep } from 'lodash-es';
import { REPORT_IDENTITY_OPTIONS } from '../../requirement/constant';

const visible = defineModel<boolean>('visible', { required: true })

const props = withDefaults(defineProps<{
    data?: any
}>(), {
    data: () => {},
})
const { data: detail } = toRefs(props)

const formRef = ref()

function closed() {
    formRef.value?.resetFields()
}

function getImageUrls(data: any) {
    const estateFileUrls = data?.estateFile ? data?.estateFile?.split(',') : []
    const houseFileUrls = data?.houseUrls ? data?.houseUrls?.split(',') : []
    return [...estateFileUrls, ...houseFileUrls]
}
</script>

<template>
    <el-drawer v-model="visible"
               :size="400"
               @closed="closed"
    >
        <template #header>
            <div class="bg-[#F2F3F5] text-[20px] font-semibold">
                详情
            </div>
        </template>

        <template #default>
            <dl>
                <dt class="font-semibold leading-32">
                    上报人信息
                </dt>

                <dd class="leading-24">
                    账号：{{ detail?.applicantMobile }}
                </dd>

                <dd class="leading-24">
                    身份：{{ treeFindLabel({ targetValue: detail?.reportIdentity, treeData: REPORT_IDENTITY_OPTIONS }) }}
                </dd>

                <dd class="leading-24">
                    联系方式：{{ detail?.reportMobile }}
                </dd>

                <dt class="font-semibold leading-32">
                    业主信息
                </dt>

                <dd class="leading-24">
                    姓名：{{ detail?.ownerName }}
                </dd>

                <dd class="leading-24">
                    身份证号：{{ detail?.ownerIdCard }}
                </dd>

                <dt class="font-semibold leading-32">
                    房屋信息
                </dt>

                <dd class="leading-24 flex gap-8">
                    <span class="truncate w-[50%]">所在区：{{ detail?.areaName }}</span>

                    <span class="truncate w-[50%]">街道：{{ detail?.streetName }}</span>
                </dd>

                <dd class="leading-24 flex gap-8">
                    <span class="truncate w-[50%]">社区：{{ detail?.communityName }}</span>

                    <span class="truncate w-[50%]">小区：{{ detail?.projectName }}</span>
                </dd>

                <dd class="leading-24">
                    栋-单元：{{ `${detail?.building}${detail?.unit === '无' ? '' : `-${detail?.unit}`}` }}
                </dd>

                <dd class="leading-24">
                    详细地址：{{ detail?.houseAddr }}
                </dd>

                <dd class="leading-24">
                    不动产登记证号/房屋权属证明：{{ detail?.estateNo }}
                </dd>

                <dd class="leading-24 flex gap-16">
                    <span class="truncate w-[fit-content]">其他证明材料</span>

                    <div class="pt-8 flex flex-1 flex-wrap gap-8">
                        <el-image v-for="item, index in getImageUrls(detail)"
                                  :key="index"
                                  class="h-[80px] w-[80px]"
                                  :src="item"
                                  :preview-src-list="getImageUrls(detail)"
                                  fit="fill"
                                  :initial-index="index"
                        />
                    </div>
                </dd>
                
            </dl>
        </template>
    </el-drawer>
</template>

<style scoped>
:deep(.el-step, .el-step.is-horizontal) {
    display: table !important;
}

:deep(.el-step__main) {
    display: table-caption;
    caption-side: top;
}

:deep(.el-step__head.is-success) {
    color: var(--el-color-primary);
    border-color: var(--el-color-primary);
}
</style>
